<template>
	<view class="w_100">
	
		<view class="w_100 j_c_c d_f " style="margin-top: 40rpx;">
			<view class="d_f j_c_c class_" style="width: 90%;">
				<view  style="width: 96%;" class="">
					<view style="width:100%;" >
						<view class="txt" >忘记密码</view>
						<view class="txt_1" >{{txt}}</view>
					</view>
					<view  style="margin-top:115rpx;position: relative;">
						<view class="" v-if="codeBoole">
							<input type="text" v-model="phone" class="inp_1" :placeholder="accout" placeholder-class="in_pla"/>
							<input type="text" v-model="code"  class="inp_2" :placeholder="passOrCode" placeholder-class="in_pla"/>
							<view class="" @tap="clearFun1">
								<uni-icons type="clear" size="20" class="clear1" style="color: #888888;" ></uni-icons>
							</view>
							<text class="code_s" @tap.stop="msgFun">{{msg}}</text>
						</view>
						<view class="" v-else>
							<input type="text" v-model="phone" class="inp_1" :placeholder="accout" placeholder-class="in_pla"/>
							<input type="text" v-model="code" class="inp_1" :placeholder="passOrCode" style="margin-top:36rpx;" placeholder-class="in_pla"/>
							<view class="" @tap="clearFun1">
								<uni-icons type="clear" size="20" class="clear1"style="color: #888888;" ></uni-icons>
							</view>
							<view class="" @tap="clearFun2">
								<uni-icons type="clear" size="20" class="clear2" style="color: #888888;" ></uni-icons>
							</view>
						</view>
						
						
					</view>
					<view class="d_f j_c_c w_100" style="margin-top: 36rpx;">
						<view class=" box" @tap="nextFun">{{nextData}}</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				txt:"通过当前手机号验证码获取密码",
				phone:"",
				code:"",
				msg:"获取验证码",
				codeBoole:true,
				passOrCode:"请输入验证码",
				accout:"请输入手机号",
				nextData:"下一步"
				
			}
		},
		methods: {
			nextFun(){
				
				if(this.nextData=="下一步"){
					if(!this.phone)return this.$funs.show("请输入手机号",0)
					if(!(/^1[3456789]\d{9}$/.test(this.phone)))return this.$funs.show("请输入正确的手机号",0)
					if(!this.code)return this.$funs.show("请输入验证码",0)
					let data={
						url:"/app/login/getuserinfo",//修改密码验证码校验
						u:1,
						data:{
							phoneNumber:this.phone,
							captcha:this.code,
						}
						
					}	
					this.$api(data).then(res=>{
						console.log(res)
						if(res.data.code==200){
							this.id = res.data.result.id;
							this.phone = "";
							this.code = "";	
							this.txt="请输入新的密码即可登录";
							this.accout ="请输入6-18位数字字母";
							this.passOrCode = "请再次输入新密码";
							this.codeBoole = false;
							this.nextData = "确认"
						}
					})	
				}else{
					if(!this.phone)return this.$funs.show("请输入新密码",0)
					if(!(/^[0-9A-Za-z][0-9A-Za-z]{5,18}$/.test(this.phone)))return this.$funs.show("密码格式不正确",0)
					if(this.code!=this.phone)return this.$funs.show("两次密码输入不一致",0)
					let data={
						url:"/app/login/forgetpassword",//修改密码
						u:1,
						data:{
							id:this.id,
							password:this.phone,
							
						}
						
					}	
					this.$api(data).then(res=>{
						console.log(res)
						if(res.data.code==200){
							this.$funs.show("修改成功！")
							setTimeout(()=>{
								this.$funs.navt("/pages/logo-register/logo")
							},2000)
						}
					})	
				}
				
				
			},
			clearFun1(){
				console.log(111111)
				this.phone = "";
				
			},
			clearFun2(){
				console.log(222)
				this.code = "";	
			},
			// 获取验证码
			msgFun(){
				if(!this.phone)return this.$funs.show("请输入手机号",0)
				if(this.msg!="获取验证码")return this.$funs.show("请勿频繁操作",0)
				let data={
					url:"/app/sms/appAcquireVerifyCode",
					u:1,
					data:{
						phoneNumber:this.phone,
					}
					
				}
				this.$api(data).then(res=>{
					console.log(res)
					if(res.data.code==200){
						this.msg = 60;
						
						let i =setInterval(()=>{
							if(this.msg==0){
								this.msg="获取验证码";
								clearInterval(i)
								return 
							} 
							this.msg =this.msg-1
						},1000)
					}
				})
			}
			
		}
	}
</script>

<style>
.class_{
	border-radius: 80rpx;
/* 	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2); */
	padding:100rpx 0 200rpx 0;
}
.txt{
	width: 50%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: left;
	font-size: 60.4rpx;
}
.txt_1{
	margin-top: 25rpx;
	text-align: left;
	font-size: 28rpx;
	color: #888888;
	
}
.inp_1{
	width: 70%;
	padding:0 20% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
	margin-top: 80rpx;
}
.inp_2{
	width: 40%;
	padding:0 50% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
	margin-top:36rpx;
}
.code{
	display: inline-block;
	width:30%;
	height: 86rpx;
	line-height: 86rpx;
	font-size: 32rpx;
	color: #87F4D0;
}
.box{
	width: 100%;
	height: 86rpx;
	font-size: 32rpx;
	line-height: 86rpx;
	text-align: center;
	color: #FFFFFF;
	background: linear-gradient(90deg, #6899F7, #68AFF7);
	border-radius: 40rpx;
}
.clear1{
	position: absolute;
	top: 24rpx;
	right:10%;
	z-index: 20;
	color:#888888;
	
}
.clear2{
	position: absolute;
	top: 144rpx;
	right:10%;
	
}
.code_s{
	position: absolute;
	top: 148rpx;
	right:4%;
	font-size: 28rpx;color: #888888;
	display: block;
	width: 200rpx;
	height: 40rpx;
	text-align: center;
	border-left: 1rpx solid #CECECF;
}
.in_pla{
	color:#B2B2B2;
	font-size: 28rpx;
}
</style>
